<template>
<tab-bar>
      <!-- 在vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念 -->
      <!-- 组件标签内嵌套，使用slot -->
      <tab-bar-item path='/home'>
        <img slot="item-img" src="@/assets/img/tabbar/home.jpg" alt="">
        <img slot="item-img-active" src="@/assets/img/tabbar/home-active.jpeg" alt="">
        <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item path='/category'>
        <img slot="item-img" src="@/assets/img/tabbar/category.jpg" alt="">
        <img slot="item-img-active" src="@/assets/img/tabbar/category-active.jpeg" alt="">
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path='/cart'>
        <img slot="item-img" src="@/assets/img/tabbar/cart.jpeg" alt="">
        <img slot="item-img-active" src="@/assets/img/tabbar/cart-active.jpg" alt="">
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path='/profile'>
        <img slot="item-img" src="@/assets/img/tabbar/profilev2.jpeg" alt="">
        <img slot="item-img-active" src="@/assets/img/tabbar/profilev2-active.jpg" alt="">
        <div slot="item-text">我的</div>
      </tab-bar-item>

    </tab-bar>
</template>

<script>

import TabBar from "@/components/tabbar/TabBar";
import TabBarItem from "@/components/tabbar/TabBarItem";


export default {
  name : 'MainTabBar',
  components : {
    TabBar,
    TabBarItem
  }
}
</script>

<style>

</style>
